<template>
  <div class="login" v-if="loginDisplay">
    <div class="mask"></div>
    <div class="login-wrap">
      <div class="login-hd">
        登录
        <i @click="close">X</i>
      </div>
      <!-- 二维码登录 -->
      <QRLogin v-if="loginMethod === 'QR'"></QRLogin>
      <!-- 其他登录方式 -->
      <keep-alive v-else-if="loginMethod === 'other'">
        <LoginMethod></LoginMethod>
      </keep-alive>
      <!-- 邮箱登录 -->
      <EmailLogin v-else-if="loginMethod === 'email'"></EmailLogin>
      <!-- 手机号码登录 -->
      <PhoneLogin v-else-if="loginMethod === 'phone'"></PhoneLogin>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { QRKey, QRImg, QRCheck, accountInfo, userInfo } from '@/api/login.js'
import LoginMethod from './LoginMethod/LoginMethod.vue'
import EmailLogin from './EmailLogin/EmailLogin.vue'
import PhoneLogin from './PhoneLogin/PhoneLogin.vue'
import QRLogin from './QRLogin/QRLogin.vue'
export default {
  components: {
    LoginMethod,
    EmailLogin,
    PhoneLogin,
    QRLogin
  },
  data() {
    return {
      // 弹出框弹出时，页面滚动距离
      winX: null,
      winY: null,
      // 登录方式
      loginMethod: 'QR'
    }
  },
  methods: {
    // 禁止页面滚动
    windowScroll(e) {
      if (this.winX !== null && this.winY !== null) {
        window.scrollTo(this.winx, this.winY)
      }
    },
    // 关闭登录页面
    close() {
      this.$store.commit('Login/setLoginDisplay', false)
      this.loginMethod = 'QR'
    }
  },
  computed: {
    ...mapState({ loginDisplay: state => state.Login.loginDisplay })
  },
  watch: {
    loginDisplay: {
      handler(val) {
        // 禁止页面滚动
        if (val) {
          this.winX = window.scrollX
          this.winY = window.scrollY
          window.addEventListener('scroll', this.windowScroll)
        } else {
          // 回复页面滚动
          this.winX = null
          this.winY = null
          window.removeEventListener('scroll', this.windowScroll)
          // 清除二维码状态轮询定时器
          window.clearTimeout(this.timer)
          this.timer = null
        }
      },
      immediate: true
    }
  },
  beforeDestroy() {
    document.body.style.overflow = ''
  }
}
</script>

<style lang="less" scoped>
@import './Login.less';
</style>
